<template>
  <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 20px" size="medium" :rules="rules"
    label-width="180px" class="newBuildForm">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="流转信息" name="first" class="cardStyle">
        <el-table v-loading :data="opinionInfo" style="width: 100%; border: 1px solid #ebeef5" :row-style="styleRow"
          :header-row-style="headerRow">
          <el-table-column prop="uName" label="操作人" width="100" align="center" min-width="12%"></el-table-column>
          <el-table-column prop="submitTime" label="操作时间" align="center" min-width="12%" sortable></el-table-column>
          <el-table-column prop="uTel" label="操作人电话" align="center" min-width="12%"></el-table-column>
          <el-table-column prop="opinion" label="意见" align="center" min-width="12%"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" min-width="12%" :formatter="opinionStateFormetter">
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="接件录入" name="second" class="cardStyle">

        <!-- 申请户主信息 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="乡镇街道" prop="townCode" v-if="showTownState">
              <el-select v-model="formInline.townCode" style="width: 100%" placeholder="请选择" @change="townChange">
                <el-option label="请选择乡镇街道" value></el-option>
                <el-option v-for="item in formInline.townList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="村组社区" prop="villageCode">
              <el-select v-model="formInline.villageCode" style="width: 100%" placeholder="请选择"
                @change="getApplyerAddress">
                <el-option v-for="item in formInline.villageList" :key="item.code" :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="户口类型" prop="addressType">
              <el-radio v-model="formInline.addressType" label="城市" style="width: 25%">城市</el-radio>
              <el-radio v-model="formInline.addressType" label="农村" style="width: 25%">农村</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型（备注）" v-if="formInline.buildingType == '4'" prop="content">
              <el-input v-model="formInline.content" autocomplete="off" ref="contentText"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="inputData">
          <table style="width: 100%" align="center" cellspacing="0" class="inputTable">
            <tr>
              <td rowspan="2" style="width: 80px">申请户<br />主信息</td>
              <td><span style="color: red">*</span> 姓名</td>
              <td style="text-align: center" id="name">
                <el-input v-model="formInline.name" autocomplete="off"></el-input>
              </td>
              <td style="width: 80px">性别</td>
              <td>
                <el-radio v-model="formInline.sex" label="男" style="width: 25%">男</el-radio>
                <el-radio v-model="formInline.sex" label="女" style="width: 25%">女</el-radio>
              </td>
              <td>年龄</td>
              <td>
                <el-input v-model.number="formInline.age" ref="age" autocomplete="off"></el-input>
              </td>
              <td><span style="color: red">*</span> 联系电话</td>
              <td id="tel">
                <el-input v-model="formInline.tel" ref="age" autocomplete="off"></el-input>
              </td>
            </tr>
            <tr>
              <td>身份证号码</td>
              <td td colspan="3" id="idCard">
                <el-input v-model="formInline.idCard" autocomplete="off"
                  @blur="queryIdCardFunction(formInline.idCard, $event)" ref="idCardText">
                </el-input>
              </td>
              <td>户口所在地</td>
              <td td colspan="3">
                <el-input v-model="formInline.address" autocomplete="off" @input="getInputValue($event)">
                  <el-select v-model="formInline.villageType" slot="append" placeholder="组或社" style="width: 100px"
                    @change="getGroupName($event)">
                    <el-option label="组" value="组"></el-option>
                    <el-option label="社" value="社"></el-option>
                  </el-select>
                </el-input>
              </td>
            </tr>
          </table>

          <table style="width: 100%" align="center" cellspacing="0" class="inputTable">
            <tr>
              <td :rowspan="familyMember.length + 1" align="center" style="width: 80px">
                家庭成<br />员信息
              </td>
              <td style="display: none">序号</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>与户主关系</td>
              <td>身份证号</td>
              <td>户口所在地</td>
              <td>
                <el-button type="primary" @click="putFailyState = true" size="small">新增成员</el-button>
              </td>
            </tr>
            <tr v-for="(fm, i) in familyMember">
              <td style="display: none">{{ i }}</td>
              <td>{{ fm.name }}</td>
              <td>{{ fm.age }}</td>
              <td>{{ fm.relation }}</td>
              <td>{{ fm.idCard }}</td>
              <td>{{ fm.address }}</td>
              <td>
                <el-button size="mini" @click="handleEdit(i, fm)" type="primary">修改
                </el-button>
                <el-button size="mini" @click="handleDelete(i, fm)" type="info">删除
                </el-button>
              </td>
            </tr>
          </table>

          <!-- 现宅基地及农房情况 -->
          <table style="width: 100%" align="center" cellspacing="0" class="inputTable">
            <tr>
              <td rowspan="2" style="width: 80px">
                现宅基<br />地及农<br />房情况&nbsp;
              </td>
              <td>宅基地面积（㎡）</td>
              <td style="text-align: center">
                <el-input v-model="formInline.nowHomesteadArea" autocomplete="off" ref="nowHomesteadArea"></el-input>
              </td>
              <td>建筑面积（㎡）</td>
              <td>
                <el-input v-model="formInline.nowBuildArea" autocomplete="off"></el-input>
              </td>
              <td>权属证书号</td>
              <td>
                <el-input v-model="formInline.nowBookId" autocomplete="off"></el-input>
              </td>
            </tr>
            <tr>
              <td>现宅基地处置情况（㎡）</td>
              <td colspan="5" style="text-align: left">
                1.保留:
                <el-input v-model="formInline.nowSaveArea" autocomplete="off" style="width: 8%"></el-input>
                （㎡）；<span style="margin-left: 150px">2.退给村集体:</span>
                <el-input v-model="formInline.nowReturnArea" autocomplete="off" style="width: 8%"></el-input>
                （㎡）；<span style="margin-left: 150px">3.其他:</span>
                <el-input v-model="formInline.nowOtherArea" autocomplete="off" style="width: 8%"></el-input>（㎡）
              </td>
            </tr>
          </table>

          <!-- 拟申请宅基地及建房（规划许可）情况 -->
          <table style="width: 100%" align="center" cellspacing="0" class="inputTableLast">
            <tr>
              <td rowspan="6" style="width: 80px">
                拟申请<br />宅基地<br />及建房<br />（规划<br />许可）<br />情况&nbsp;
              </td>
              <td colspan="2">宅基地面积（㎡）</td>
              <td style="text-align: center">
                <el-input v-model="formInline.applyHomesteadArea" ref="applyHomesteadArea" autocomplete="off" @blur="
                      checkApplyArea(formInline.applyHomesteadArea, $event)
                    ">
                </el-input>
              </td>
              <td colspan="2">房基占地面积（㎡）</td>
              <td>
                <el-input v-model="formInline.applyFoundationArea" autocomplete="off"></el-input>
              </td>
            </tr>
            <tr>
              <td>地址</td>
              <td colspan="5" style="text-align: left">
                <el-input v-model="formInline.applyAddress" @input="applyAddressUpdate($event)">
                </el-input>
              </td>
            </tr>

            <tr>
              <td rowspan="2">四至</td>
              <td>东至</td>
              <td>
                <el-input v-model="formInline.east" autocomplete="off" placeholder="东至"></el-input>
              </td>
              <td>南至</td>
              <td>
                <el-input v-model="formInline.south" autocomplete="off" placeholder="南至"></el-input>
              </td>
              <td rowspan="3">
                建房类型：
                <el-radio-group v-model="formInline.buildingType">
                  <el-radio :label="'1'" style="margin-top: 15px">原址翻建</el-radio><br />
                  <el-radio :label="'2'" style="margin-top: 15px">改扩建</el-radio><br />
                  <el-radio :label="'3'" style="margin-top: 15px">异址新建</el-radio><br />
                  <el-radio :label="'4'" style="margin-top: 15px">其他类型</el-radio><br />
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td>西至</td>
              <td>
                <el-input v-model="formInline.west" autocomplete="off" placeholder="西至"></el-input>
              </td>
              <td>北至</td>
              <td>
                <el-input v-model="formInline.north" autocomplete="off" placeholder="北至"></el-input>
              </td>
            </tr>
            <tr>
              <td>地类</td>
              <td colspan="4">
                <el-radio-group v-model="formInline.landType">
                  <el-radio :label="'1'" style="margin-top: 15px">建设用地</el-radio>
                  <el-radio :label="'2'" style="margin-top: 15px">未利用地</el-radio><br />
                  <el-radio :label="'3'" style="margin-top: 15px; margin-left: -72px">农用地</el-radio>
                  <el-radio :label="'4'" style="margin-top: 15px">其他</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td>住房建筑面积（㎡）</td>
              <td>
                <el-input v-model="formInline.applyHousingArea" autocomplete="off"></el-input>
              </td>
              <td>建筑层数（层）</td>
              <td>
                <el-input v-model.number="formInline.applyLayer" autocomplete="off"
                  @blur="checkApplyLayer(formInline.applyLayer, $event)"></el-input>
              </td>
              <td>建筑高度（m）</td>
              <td>
                <el-input v-model="formInline.applyHight" autocomplete="off"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="7" align="left">
                是否征求相邻权利人意见：
                <el-radio-group v-model="formInline.neighborMind">
                  <el-radio :label="'是'" aria-checked="true" style="margin-top: 15px; top: -6px">是</el-radio>
                  <el-radio :label="'否'" style="margin-top: 15px; top: -6px">否</el-radio><br />
                </el-radio-group>
              </td>
            </tr>
          </table>
        </div>

        <!-- 录入成员信息 -->
        <el-dialog title="录入家庭成员信息" :visible.sync="putFailyState" center :append-to-body="true" :lock-scroll="false"
          width="36%">
          <el-form :model="memberDetail" ref="memberDetail" style="text-align: center; font-size: 20px"
            label-width="130px">
            <el-form-item label="姓名">
              <el-input v-model="memberDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="memberDetail.idCard" @blur="queryIdCardFunctionF(memberDetail.idCard, $event)">
              </el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model.number="memberDetail.age"></el-input>
            </el-form-item>
            <el-form-item label="与户主关系">
              <el-select style="width: 100%" v-model="memberDetail.relation" filterable allow-create
                default-first-option placeholder="请选择或者填写与户主的关系">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="户口所在地">
              <el-select style="width: 100%" v-model="memberDetail.address" filterable allow-create default-first-option
                placeholder="请选择或者填写户口所在地">
                <el-option v-for="item in optionsAddress" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-button @click="putMemberSave(memberDetail)" type="primary">保存</el-button>
            <el-button @click="putMemberCancel">取消</el-button>
          </el-form>
        </el-dialog>

        <el-card style="margin-top: 1%; font-size: 20px; height: 250px">
          要件上传
          <div class="uploadStyle">
            <el-button type="primary" @click="openCamera('申请表')" style="width: 200px; font-size: 18px; height: 100px">
              <i class="el-icon-camera"></i>申请表
            </el-button>

            <el-button type="primary" @click="openCamera('家庭户口簿')" style="width: 200px; font-size: 18px; height: 100px">
              <i class="el-icon-camera"></i>家庭户口簿
            </el-button>

            <el-button type="primary" @click="openCamera('承诺书')" style="width: 200px; font-size: 18px; height: 100px">
              <i class="el-icon-camera"></i>承诺书
            </el-button>
            <el-button type="primary" @click="openCamera('原不动产权证')"
              style="width: 200px; font-size: 18px; height: 100px">
              <i class="el-icon-camera"></i>原不动产权证
            </el-button>

            <el-button type="primary" @click="openCamera('其他件')" style="width: 200px; font-size: 18px; height: 100px">
              <i class="el-icon-camera"></i>其他件
            </el-button>
          </div>

          <!-- 上面那个是拍照的，这个是本地文件上传的 -->
          <el-dialog :visible.sync="uploadState2" center :title="fileName" :show-close="false">
            <el-upload action="#" list-type="picture-card" :auto-upload="false" accept="image/*" multiple
              :http-request="addFile" ref="upload">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="uploadCancel">取 消</el-button>
              <el-button type="primary" @click="submitUpload">保 存</el-button>
            </span>
          </el-dialog>

          <el-dialog :visible.sync="uploadState" center :title="tempName" :show-close="false">
            <el-upload action="#" list-type="picture-card" :auto-upload="false" accept="image/*" multiple
              :http-request="addFile" ref="upload">
              <i slot="default" class="el-icon-camera"></i>
            </el-upload>
            <el-button @click="openCamera"><i class="el-icon-camera"></i></el-button>
            <span slot="footer" class="dialog-footer">
              <el-button @click="uploadCancel">取 消</el-button>
              <el-button type="primary" @click="submitUpload">提交</el-button>
            </span>
          </el-dialog>
          <el-dialog :visible.sync="cameraState" center title="要件拍摄">
            <img id="bigPriDev" width="100%" height="100%" />
            <br /><br /><br />
            <img id="devPhoto" width="30%" />

            <div id="container" style="float: left"></div>
            <el-button size="mini" type="danger" id="deletePic" icon="el-icon-delete" @click="deletePic" circle
              v-if="noState"></el-button>
            <br /><br />
            <div style="margin-left: 30%; margin-top: 10%">
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" id="createPhoto" @click="createPhoto">拍照</el-button>
                <el-button type="danger" id="rePhoto" @click="rePhoto">重拍</el-button>
                <el-button type="primary" @click="confirmPhoto">保存</el-button>
                <el-button type="primary" @click="applyFor()">上传本地图片</el-button>
                <el-button @click="cameraCancel">取 消</el-button>
              </span>
            </div>
          </el-dialog>
        </el-card>

        <el-card style="margin-top: 1%; font-size: 20px">
          要件列表
          <el-table :data="formInline.formFileList" style="margin-top: 1%" v-loading @cell-dblclick="editDocName">
            <el-table-column prop="docName" label="要件名称" align="center">
              <editable-cell slot-scope="{ row }" :can-edit="editDocNameEnabled" v-model="row.docName">
                <span slot="content">{{ row.docName }}</span>
              </editable-cell>
            </el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
            <el-table-column prop="type" label="图片数量（张）" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)" type="primary">预览</el-button>
                <el-button size="mini" @click="handleDeleteFile(scope.$index, scope.row)" type="info">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog :visible.sync="centerDialogVisible" center>
            <div class="block">
              <el-image :src="url" id="printImg"></el-image>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" v-print="'#printImg'">打印</el-button>
            </span>
          </el-dialog>
        </el-card>
        <el-card style="margin-top: 1%">
          意见
          <br />
          <el-input ref="initState" type="textarea" placeholder="请填写意见"
            style="margin-top:10px;width=100%;font-size:20px" v-model="formInline.opinion">
          </el-input>
        </el-card>
        <el-card style="margin-top: 1%; margin-bottom: 1%">
          <el-button type="success" style="width: 100px; font-size: 18px" v-if="formInline.active === 0"
            @click="commitPro('formInline')">提交</el-button>
          <el-button type="info" style="width: 100px; font-size: 18px" v-if="formInline.active !== 0" @click="backPro">
            退件</el-button>
          <el-button type="primary" style="width: 100px; font-size: 18px" v-if="formInline.active === 0"
            @click="saveConfirm('formInline')">暂存</el-button>
          <el-button type="danger" style="width: 100px; font-size: 18px" @click="cancle">取消</el-button>
          <el-dialog :visible.sync="generateDocState" center title="农村宅基地和建房（规划许可）申请审批办理一次性告知书">
            <div style="font-size: 18px; text-aglin: center">
              经审查（核），你处申请审批办理宅基地和建房（规划许可、房屋验收）事项，因申请审批资料不完善，请补齐
              <el-select v-model="generateDocList" multiple filterable allow-create default-first-option
                placeholder="请选择缺少要件" style="height: 50px">
                <el-option label="申请表" value="申请表"></el-option>
                <el-option label="家庭户口簿" value="家庭户口簿"></el-option>
                <el-option label="承诺书" value="承诺书"></el-option>
                <el-option label="土地证" value="土地证"></el-option>
                <el-option label="原不动产权证" value="原不动产权证"></el-option>
              </el-select>等资料后重新申请审批。
              <br />
              <br />
              <div style="width: 37%">
                <el-input placeholder="单位" v-model="department"></el-input>
              </div>
              <div style="padding-left: 70%">年 月 日（自动生成）</div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="generateDocState = false">取 消</el-button>
              <el-button type="primary" @click="generateDocMethod">保存</el-button>
            </span>
          </el-dialog>
          <el-dialog title="请选择告知书模板" :visible.sync="oneTimeState" width="40%" center :show-close="false">
            <span style="text-aglin: center">
              <el-button type="primary" @click="lackDoc" plain style="width: 32%; font-size: 20px">缺少要件</el-button>
              <el-button type="primary" @click="haveReason" plain style="width: 32%; font-size: 20px">不予接件</el-button>
              <el-button type="primary" @click="cancelOneTime" plain style="width: 32%; font-size: 20px">不生成告知书
              </el-button>
              <br />
            </span>
          </el-dialog>
          <el-dialog :visible.sync="oneTime2State" center title="农村宅基地和建房（规划许可）申请审批办理一次性告知书">
            <div style="font-size: 18px; text-aglin: center">
              经审查（核），你处申请审批办理宅基地和建房（规划许可、房屋验收）事项，因不符合申请条件之
              <el-input v-model="formInline.reason"></el-input>
              <br />
              <br />审查（核）未通过。
              <div style="width: 37%">
                <el-input placeholder="单位" v-model="formInline.department"></el-input>
              </div>
              <div style="padding-left: 70%">年 月 日（自动生成）</div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="oneTime2State = false">取 消</el-button>
              <el-button type="primary" @click="oneTime2Save">保存</el-button>
            </span>
          </el-dialog>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
  import store from "@/vuex/store";
  import {
    saveProApi,
    commitProApi,
    returnProApi,
    queryIdCordApi,
  } from "@/api/applyApi";
  import {
    getFamilyMenberByBiidApi
  } from "@/api/familyMenberApi";
  import {
    getDocumentListApi,
    downDocumentApi,
    deleteDocument,
  } from "@/api/documentApi";
  import {
    queryOpinionByApplyCodeApi
  } from "@/api/opinionApi";
  import {
    getChildrenAddress,
    selectByCode
  } from "@/api/addressDictionary";
  import axios from "axios";
  import config from "@/config/config";
  import QWeb from "@/util/qwebchannel";
  import EditableCell from "./component/editCell.vue";
  export default {
    name: "putBussi",
    components: {
      EditableCell,
    },
    data() {
      return {
        addressCode: store.getters.addressCode,
        yesState: false,
        noState: false,
        oneTime2State: false,
        oneTimeState: false,
        applyAddress: "",
        addressName: config.addressName,
        oneTime2State: false,
        oneTimeState: false,
        applyAddress: "",
        addressName: config.addressName,
        oneTime2State: false,
        oneTimeState: false,
        shenQing: "申请审批表",
        jiaTingHuKou: "家庭户口簿",
        chengNuoShu: "承诺书",
        TuDiZheng: "土地证",
        yuanBuDong: "原不动产权证",
        qiTa: "其他件",
        tempName: "",
        fileName: "",
        fileList: [],
        previewVisible: false,
        uploadState: false,
        uploadState2: false,
        photoPathArray: [],
        photoPath: "",
        imgPathArray: [],
        imgPath: "",
        department: "",
        generateDocList: [],
        generateDocState: false,
        idCardState: true,
        socket: null,
        dialog: null,
        uid: store.getters.uid,
        showTownState: false,
        preUrl: "",
        confirmUrl: "",
        cameraState: false,
        centerDialogVisible: false,
        url: "",
        currentCode: store.getters.currentCode,
        headerRow: {
          "font-size": "20px",
          margin: "2%",
          height: "80px",
        },
        styleRow: {
          "font-size": "15px",
          height: "50px",
        },
        opinionInfo: [{
          uName: "",
          opinion: "",
          state: "",
          order: "",
          submitTime: "",
        }, ],
        activeName: "second",
        initState: false,
        fileList: [],
        formFile: new FormData(),
        fileData: "",
        formInline: {
          active: 0, //步骤条
          applyCode: null, //业务编号
          name: "", //申请人姓名
          sex: "", //性别
          tel: null, //电话
          idCard: "", //身份证号
          address: "", //户口所在地
          age: null, //年龄
          nowHomesteadArea: null, //现宅基地面积
          nowBuildArea: null, //现建筑面积
          nowBookId: "", //现权属证书号
          nowSaveArea: "", //现保留面积
          nowReturnArea: "", //退给村集体面积
          nowOtherArea: "", //其他面积
          applyHomesteadArea: "", //拟申请宅基地面积
          applyFoundationArea: "", //拟申请房基占地面积
          applyAddress: "", //拟申请宅基地及建房地址
          east: "", //东至
          south: "", //南至
          west: "", //西至
          north: "", //北至
          buildingType: "", //建房类型
          landType: "", //地类
          applyHousingArea: "", //住房建筑面积
          applyLayer: "", //层数
          applyHight: "", //高度
          neighborMind: "", //邻居意见
          //文件列表
          formFileList: [],
          townCode: "", //乡镇街道代码
          villageCode: "", //村组社区代码
          townList: [], //乡镇街道列表
          villageList: [], //村组社区列表
          opinion: "", //意见
          content: "",
          notPassFlag: 0,
          addressType: "",
        },
        editDocNameEnabled: false,
        putFailyState: false, //录入家庭成员状态
        familyMember: [], //家庭成员
        //家庭成员详情
        memberDetail: {
          listId: "",
          name: "",
          age: "",
          address: "",
          relation: "",
          idCard: "",
          applyCode: "",
        },
        options: [{
            value: "配偶",
            label: "配偶",
          },
          {
            value: "父子",
            label: "父子",
          },
          {
            value: "父女",
            label: "父女",
          },
          {
            value: "母子",
            label: "母子",
          },
          {
            value: "母女",
            label: "母女",
          },
          {
            value: "祖孙",
            label: "祖孙",
          },
          {
            value: "兄弟",
            label: "兄弟",
          },
          {
            value: "姊妹",
            label: "姊妹",
          },
          {
            value: "旁系亲属",
            label: "旁系亲属",
          },
        ],
        addressTypeOptions: [{
            value: "城市",
            label: "城市",
          },
          {
            value: "农村",
            label: "农村",
          },
        ],
        optionsAddress: [{
          value: "城市",
          label: "城市",
        }, ],
        idCardF: "",
        rules: {
          villageCode: [{
            required: true,
            message: "请选择村组社区",
            trigger: "change",
          }, ],
          addressType: [{
            required: true,
            message: "请选户口类型",
            trigger: "change",
          }, ],
          content: [{
            required: true,
            message: "请输入要件类型的备注",
            trigger: "blur",
          }, ],
        },
        memberList: [],
        fileCommitState: false,
      };
    },
    created: function () {
      this.formInline = this.$route.query;
      this.formInline.addressCode = this.addressCode;
      this.showTown();
      if (this.formInline.applyCode) {
        this.getFamilyMenber(this.formInline.applyCode);
        this.getDocumentList(this.formInline.applyCode);
        this.getOpinion(this.formInline.applyCode);
      } else {
        //防止没有数据的时候，家庭成员显示列表
        this.getFamilyMenber(-1);
        this.getDocumentList(-1);
      }
    },

    watch: {
      "formInline.address": {
        //deep:true 设置深度监听 当telphone值发生变化时触发handler方法
        deep: true,
        //这里的function不能写成箭头函数，不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
        handler: function (newVal, oldVal) {
          this.optionsAddress[0].value = newVal;
          this.optionsAddress[0].lable = newVal;
        },
      },
    },

    methods: {
      //相同文件提示
      checkFile(list, name) {
        for (let i = list.length - 1; i >= 0; i--) {
          if (list[i].docName == name && name !== "其他件") {
            return false;
          }
        }
        return true;
      },
      //取消拍摄
      cameraCancel() {
        this.cameraState = false;
        this.noState = false;
        document.getElementById("container").innerHTML = "";
        this.imgPath = "";
        this.imgPathArray = [];
        this.photoPath = "";
        this.photoPathArray = [];
      },
      //重拍
      rePhoto() {
        this.noState = false;
        document.getElementById("container").innerHTML = "";
        this.imgPath = "";
        this.imgPathArray = [];
        this.photoPath = "";
        this.photoPathArray = [];
      },
      //打开相机
      openCamera(name) {
        this.fileName = name; //先给赋值文件名
        if (this.checkFile(this.fileList, name)) {
          this.cameraState = true; //接收图像显示
          this.dialog.send_priImgData.connect(function (message) {
            var element = document.getElementById("bigPriDev");
            element.src = "data:image/jpg;base64," +
              message; //"data:image/jpg;base64," // this.preUrl = "data:image/jpg;base64," + message;
          });
          this.fileName = name;
        } else {
          this.$message({
            showClose: true,
            message: name + "已上传，请检查！",
            type: "error",
          });
        }
      }, //打开socket
      openSocket(baseUrl) {
        this.socket = new WebSocket(baseUrl);
        var _that = this;
        this.socket.onopen = function () {
          new QWeb.QWebChannel(_that.socket, function (channel) {
            _that.dialog = channel.objects.dialog;
            _that.dialog.set_configValue("set_savePath:e:/upload");
            _that.dialog.html_loaded("one");
          });
        };
      },

      //点击拍照
      createPhoto() {
        const _that = this;
        this.dialog.photoBtnClicked("primaryDev_");
        //接收拍照base64
        _that.dialog.send_priPhotoData.connect(function (message) {
          //var element = document.getElementById("devPhoto");
          //element.src = "data:image/jpg;base64," + message;
          _that.imgPath = "data:image/jpg;base64," + message;
        });
        this.dialog.sendPrintInfo.connect(function (message) {
          _that.photoPath = message.substring(18);
          // _that.imgPath = message.substr(18);
        });
        //1秒后出图
        setTimeout(function () {
          _that.createImgArr();
        }, 1000);
      },
      //生成图片数组
      createImgArr() {
        var container = document.getElementById("container");
        var newchild = document.createElement("div");
        newchild.setAttribute("style", "float:left");
        newchild.setAttribute("id", this.imgPath);
        var s = "";
        this.imgPathArray.push(
          this.imgPath.replace(/^data:image\/\w+;base64,/, "")
        ); //截取base64地址的头部
        if (this.imgPath.length != 0) {
          ////增加缩略图时默认把路径加入图片数组
          s =
            "<img width='105' id='pic' height='85' src='" +
            this.imgPath +
            "' /></img><input type='checkbox' checked='checked' name='ck' value='" +
            this.imgPath +
            "'  onchange='checkboxClicked(this)' />";
          newchild.innerHTML = s;
          container.appendChild(newchild);
        }

        if (this.imgPathArray.length != 0) {
          this.noState = true;
        } else {
          this.noState = false;
        }
      },
      //照片提交
      confirmPhoto() {
        //this.confirmUrl = this.watchMessage();
        this.dialog.get_actionType("savePhotoPriDev");
        //this.cameraState = false;
        //打开加载等待效果
        const loading = this.$loading({
          lock: true,
          text: "正在上传",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let configs = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        if (this.formInline.applyCode) {
          this.formFile.append("applyCode", this.formInline.applyCode);
        } else if (!this.formInline.townCode) {
          this.$message({
            showClose: true,
            message: "请选择乡镇",
            type: "warning",
          });
          return;
        }
        this.formFile.append("currentCode", this.formInline.townCode);
        this.formFile.append("token", store.getters.token);
        this.formFile.append("name", this.fileName);
        this.formFile.append("files", this.imgPathArray);
        axios
          .post(config.uploadApprovalBaseUrl, this.formFile, configs)
          .then((res) => {
            this.$message.success("提交成功");
            // this.$router.go(-1);
            loading.close();
            this.formInline.applyCode = res.data.applyCode;
            this.fileList.push(res.data);
            this.formFile = new FormData();
            this.cameraState = false; //关闭窗口
            var element = document.getElementById("devPhoto");
            //  element.src = "";
            document.getElementById("container").innerHTML = "";
            this.imgPath = "";
            this.imgPathArray = [];
            this.photoPath = "";
            this.photoPathArray = [];
            this.fileCommitState = true;
            this.noState = false;
          })
          .catch((err) => {
            this.$message({
              showClose: true,
              message: err,
              type: "warning",
            });
            loading.close();
          });
      },
      //删除照片
      deletePic() {
        var cks = document.getElementsByName("ck");
        var checkVal = [];
        for (var i in cks) {
          if (cks[i].checked) {
            checkVal.push(cks[i].value);
          }
        }
        for (var j in checkVal) {
          var nodes = document.getElementById(checkVal[j]);
          document.getElementById("container").removeChild(nodes); //删除选中的图片
          this.imgPathArray.splice(checkVal[j], 1); //删除图片数组中的数据
          this.photoPathArray.splice("file:///" + checkVal[j], 1); //删除照片
        }
        if (this.imgPathArray.length != 0) {
          this.noState = true;
        } else {
          this.noState = false;
        }
      },

      applyAddressUpdate(e) {
        this.$forceUpdate();
      },
      checkApplyLayer(applyLayer, e) {
        if (isNaN(applyLayer)) {
          this.$message({
            showClose: true,
            message: "请正确输入建筑层数",
            type: "warning",
          });
        } else {
          if (applyLayer > 3) {
            this.$message({
              showClose: true,
              message: "建筑层数最高为3层，请检查！",
              type: "warning",
            });
          }
        }
      },
      checkApplyArea(applyArea, e) {
        if (isNaN(applyArea)) {
          this.$message({
            showClose: true,
            message: "请正确输入申请宅基地面积",
            type: "warning",
          });
          return;
        } else {
          if (this.familyMember.length <= 2 && applyArea > 90) {
            this.$message({
              showClose: true,
              message: "家庭人口数小于3人，申请面积不能超过90㎡，请检查！",
              type: "warning",
            });
            return;
          }
          if (this.familyMember.length === 3 && applyArea > 120) {
            this.$message({
              showClose: true,
              message: "家庭人口数4人，申请面积不能超过120㎡，请检查！",
              type: "warning",
            });
            return;
          }
          if (this.familyMember.length >= 4 && applyArea > 150) {
            this.$message({
              showClose: true,
              message: "家庭人口数超过4人，申请面积超过150㎡，请检查！",
              type: "warning",
            });
            return;
          }
        }
        return true;
      },
      getGroupName(e) {
        var temp = this.formInline.villageType;
        if (
          null == this.formInline.address ||
          "" == this.formInline.address ||
          undefined == this.formInline.address
        ) {
          this.formInline.address = temp;
        } else {
          this.formInline.address += temp;
        }
        // 这里可能有用
        // this.formInline.applyAddress = this.formInline.address;
        this.optionsAddress[0].value = this.formInline.address;
        this.optionsAddress[0].lable = this.formInline.address;
        this.formInline.applyAddress = this.formInline.address;
        temp = "";
      },

      //因为给输入框赋值，所以不能编辑了，这个方法可以解决这个问题
      getInputValue(e) {
        this.$forceUpdate();
        if (this.formInline.address) {
          this.optionsAddress[0].value = this.formInline.address;
          this.optionsAddress[0].lable = this.formInline.address;
        }
      },
      canChange(e) {
        this.$forceUpdate();
      },
      getApplyerAddress() {
        selectByCode(this.formInline.villageCode)
          .then((res) => {
            this.addressName += res.data.data;
            this.$forceUpdate();
            this.formInline.address = this.addressName;
            this.formInline.applyAddress = this.addressName;
            this.applyAddress = this.addressName;
            //两个地址保持一样
            this.addressName = "重庆市黔江区";
          })
          .catch((err) => {});
      },
      cancelOneTime() {
        this.oneTimeState = false;
        this.formInline.generateDoc = 0;
        this.savePro();
      },
      oneTime2Save() {
        if (!this.formInline.reason) {
          this.$message.error("请填写一次性告知书原因");
          return;
        } else {
          this.formInline.generateDoc = 2;
          this.savePro();
        }
      },
      lackDoc() {
        this.oneTimeState = false;
        this.generateDocState = true;
      },
      haveReason() {
        this.oneTimeState = false;
        this.oneTime2State = true;
      },
      //编辑要件名称
      editDocName(row, column, cell, event) {
        this.editDocNameEnabled = true;
      },
      //取消上传
      uploadCancel() {
        this.formFile = new FormData();
        this.uploadState = false;
        this.uploadState2 = false;
        this.$refs.upload.clearFiles();
      },
      //提交上传
      submitUpload() {
        const loading = this.$loading({
          //打开加载等待效果
          lock: true,
          text: "正在上传",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let configs = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };

        this.$refs.upload.submit();
        if (!this.fileCommitState) {
          this.$message.error("请选择文件");
          loading.close();
          return;
        }

        if (this.formInline.applyCode) {
          this.formFile.append("applyCode", this.formInline.applyCode);
        } else {
          this.formFile.append("currentCode", this.formInline.townCode);
        }

        this.formFile.append("token", store.getters.token);
        this.formFile.append("name", this.fileName);
        axios
          .post(config.uploadApprovalUrl, this.formFile, configs)
          .then((res) => {
            this.$message.success("提交成功");
            // this.$router.go(-1);
            loading.close();
            this.formInline.applyCode = res.data.applyCode;
            this.fileList.push(res.data);
            this.formFile = new FormData();
            this.uploadState = false;
            this.uploadState2 = false;
            this.$refs.upload.clearFiles();
            this.fileCommitState = true;
            console.log(res);
          })
          .catch((err) => {
            this.$message.error(err.respondMessage);
            loading.close();
          });
      },
      addFile(file) {
        this.formFile.append("files", file.file);
        this.fileCommitState = true;
      },
      showTown() {
        if (this.currentCode.length > 9) {
          this.showTownState = true;
        } else {
          this.showTownState = false;
          this.formInline.townCode = this.currentCode;
        }
      },
      //改变乡镇
      townChange() {
        if (this.formInline.townCode) {
          getChildrenAddress(this.formInline.townCode).then((villageList) => {
            this.formInline.villageList = villageList.data.data;
            this.formInline.villageCode = this.formInline.villageList[0].code;
          });
        }
      },
      //格式化意见状态
      opinionStateFormetter(row) {
        return row.state == "1" ?
          "收件" :
          row.state == "2" ?
          "接件" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工管理" :
          row.state == "6" ?
          "归档" :
          "未知";
      },
      sexFormatter(row) {
        return row.sex == "1" ? "男" : row.sex == "2" ? "女" : "未知";
      },
      //获取意见列表
      getOpinion(applyCode) {
        queryOpinionByApplyCodeApi(applyCode)
          .then((res) => {
            this.opinionInfo = res.data.data;
          })
          .catch((err) => {
            this.$message.error(err.data.respondMessage);
          });
      },
      //校验
      checkCommitInfo(formInline) {
        if (!formInline.name) {
          var nameTd = document.getElementById("name");
          nameTd.setAttribute("class", "inputName");
          return false;
        }

        if (!formInline.idCard) {
          var idCardTd = document.getElementById("idCard");
          idCardTd.setAttribute("class", "inputName");
          return false;
        }

        if (!formInline.tel) {
          var telTd = document.getElementById("tel");
          telTd.setAttribute("class", "inputName");
          return false;
        }
      },
      //提交到 state += 1
      commitPro(formName) {
        const loading = this.$loading({
          //打开加载等待效果
          lock: true,
          text: "正在提交",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        if (this.formInline.addressType == "城市") {
          loading.close();
          this.$message.error("城市户口不给予通过");
          return;
        }
        if (this.checkCommitInfo(this.formInline) == false) {
          loading.close();
          this.$message.error("请输入必选字段");
          return;
        }
        //不符合名单
        if (this.formInline.notPassFlag === 1) {
          loading.close();
          this.$message.error("该件已加入到不符合名单，不能提交");
          return;
        }

        if (this.idCardState) {
          this.formInline.uid = this.uid;
          //身份证
          if (this.checkIdCardByJs(this.formInline.idCard) == false) {
            loading.close();
            return;
          }

          //文件
          if (!this.getCommitFile(this.formInline.formFileList)) {
            loading.close();
            return;
          }

          //成员身份证
          if (
            this.commitProPutMember(
              this.formInline.formMenberList,
              this.formInline.idCard
            ) == false
          ) {
            this.$message({
              showClose: true,
              message: "家庭成员中某一个身份证重复,或者成员与户主身份证相同",
              type: "error",
            });
            loading.close();
            return;
          }

          //申请面积
          if (
            this.checkApplyMj(
              this.formInline.formMenberList,
              this.formInline.applyHomesteadArea
            ) == false
          ) {
            this.$message({
              showClose: true,
              message: "申请面积超出人口数最大面积",
              type: "message",
            });
            loading.close();
            return;
          }

          this.$confirm("是否提交到下一个阶段?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
            .then(() => {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  commitProApi(this.formInline)
                    .then((response) => {
                      this.$message({
                        showClose: true,
                        message: "提交成功",
                        type: "success",
                      });
                      this.formInline = {};
                      loading.close(); //瞬间没得
                      this.$router.go(-1);
                    })
                    .catch((error) => {
                      console.log(error);
                      this.$message({
                        showClose: true,
                        message: error.data.respondMessage,
                        type: "error",
                      });
                      loading.close();
                    });
                } else {
                  this.$message({
                    showClose: true,
                    message: "提交失败，请检查户主信息的红色字段是否填写正确",
                    type: "error",
                  });
                  loading.close();
                }
              });
            })
            .catch((e) => {
              this.$message({
                type: "info",
                message: "取消提交",
              });
              loading.close();
            });
        } else {
          this.$message.error("请检查身份证");
        }
      },
      //判断要件
      getCommitFile(fileList) {
        var flag = true;
        var fileLength = fileList.length;
        var fileListNames = "";
        for (let i = 0; i < fileLength; i++) {
          fileListNames += fileList[i].docName;
        }
        if (fileLength < 1) {
          this.$message({
            showClose: true,
            message: "请上传所有必要件",
            type: "error",
          });
          flag = false;
          return flag;
        }

        if (this.formInline.buildingType != "3") {
          if (fileListNames.indexOf("申请表") == -1) {
            this.$message({
              showClose: true,
              message: "请上传申请表",
              type: "error",
            });
            flag = false;
            return flag;
          }
          if (fileListNames.indexOf("户口簿") == -1) {
            this.$message({
              showClose: true,
              message: "请上传家庭户口簿",
              type: "error",
            });
            flag = false;
            return flag;
          }
          if (fileListNames.indexOf("承诺书") == -1) {
            this.$message({
              showClose: true,
              message: "请上传承诺书",
              type: "error",
            });
            flag = false;
            return flag;
          }
          if (fileListNames.indexOf("原不动产权证") == -1) {
            this.$message({
              showClose: true,
              message: "请上传原不动产权证",
              type: "error",
            });
            flag = false;
            return flag;
          }
        }

        if (this.formInline.buildingType == "3") {
          if (fileListNames.indexOf("申请表") == -1) {
            this.$message({
              showClose: true,
              message: "请上传申请表",
              type: "error",
            });
            flag = false;
            return flag;
          }
          if (fileListNames.indexOf("家庭户口") == -1) {
            this.$message({
              showClose: true,
              message: "请上传家庭户口簿",
              type: "error",
            });
            flag = false;
            return flag;
          }
          if (fileListNames.indexOf("承诺书") == -1) {
            this.$message({
              showClose: true,
              message: "请上传承诺书",
              type: "error",
            });
            flag = false;
            return flag;
          }
        }
        //flag = true;
        return flag;
      },
      //判断面积
      checkApplyMj(memberList, applyMj) {
        var flag = true;
        if (this.familyMember) {
          if (applyMj > 90) {
            flag = false;
            return flag;
          }
        } else if (memberList.length + 1 <= 3) {
          if (applyMj > 90) {
            flag = false;
            return flag;
          }
        } else if (memberList.length + 1 == 4) {
          if (applyMj > 120) {
            flag = false;
            return flag;
          }
        } else if (memberList.length + 1 >= 5) {
          if (applyMj > 150) {
            flag = false;
            return flag;
          }
        } else {
          return flag;
        }
        return flag;
      },
      //退件
      backPro() {
        this.formInline.uid = this.uid;
        returnProApi(this.formInline)
          .then((response) => {
            //this.$router.go(-1)
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: "退件失败",
              type: "error",
            });
          });
        this.$router.go(-1);
      },
      //删除家庭成员
      handleDelete(index, row) {
        //回显
        this.familyMember.splice(index, 1);
      },
      //修改某一个家庭成员
      handleEdit(i, row) {
        console.log(i, row);
        this.memberDetail = row;
        this.memberDetail.listId = i + 1;
        this.putFailyState = true;
      },

      commitProPutMember(memberList, HuZhuIdCard) {
        var flag = true;
        if (memberList) {
          for (let i = 0; i < memberList.length; i++) {
            //保存当前idCard
            var idCard = memberList[i].idCard;

            //不能与户主相同
            if (idCard == HuZhuIdCard) {
              flag = false;
              return flag;
            }

            //与数据库已经存在的做对比 为true才放行
            if (!this.queryIdCardCommitF(idCard)) {
              flag = false;
              return flag;
            } else {
              flag = true;
            }

            //把当前的idCard与列表的每一个idCard做比较
            for (let j = 0; j < memberList.length; j++) {
              if (idCard == memberList[j].idCard) {
                if (j === i) {
                  break;
                } else {
                  flag = false;
                  return flag;
                }
              }
            }
          }
        }
        return flag;
      },
      //添加家庭成员
      putMemberSave(memberDetail) {
        //新增
        if (!memberDetail.listId) {
          if (!this.formInline.formMenberList) {
            memberDetail.listId = 1;
          } else {
            memberDetail.listId = this.formInline.formMenberList.length;
          }
          //回显
          this.familyMember.push(memberDetail);
          this.formInline.formMenberList = this.familyMember;
        }
        this.formInline.formMenberList = this.familyMember;
        this.putMemberCancel();
        this.putFailyState = false;
      },
      //获取家庭成员
      getFamilyMenber(applyCode) {
        if (applyCode === -1) {
          return;
        } else {
          getFamilyMenberByBiidApi(applyCode)
            .then((response) => {
              this.familyMember = response.data.data.items;
              this.formInline.formMenberList = this.familyMember;
            })
            .catch((error) => {
              this.$message({
                showClose: true,
                message: error,
                type: "error",
              });
              this.tableLoding = false;
            });
        }
      },
      //删除要件
      handleDeleteFile(index, row) {
        if (row.url) {
          deleteDocument(row)
            .then((res) => {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success",
              });
              this.formInline.formFileList.splice(index, 1);
            })
            .catch((error) => {
              this.$message({
                showClose: true,
                message: "删除失败！",
                type: "error",
              });
            });
        } else {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.formInline.formFileList.splice(index, 1);
          this.formFile.delete(row.fileName);
        }
      },
      //下载要件
      downDocument(index, row) {
        downDocumentApi(row.id);
        this.$message({
          showClose: true,
          message: "下载成功",
          type: "success",
        });
      },
      //新增家庭成员时，点击取消，将数据清空
      putMemberCancel() {
        this.memberDetail = {
          listId: "",
          name: "",
          age: "",
          address: "",
          relation: "",
          idcard: "",
          applyCode: this.formInline.applyCode,
        };

        this.putFailyState = false;
      },
      // 获取要件列表
      getDocumentList(applyCode) {
        if (applyCode === -1) {
          this.formInline.formFileList = this.fileList;
          return;
        } else {
          getDocumentListApi(applyCode)
            .then((response) => {
              this.fileList = response.data.data.items;
              this.formInline.formFileList = this.fileList;
            })
            .catch((error) => {
              this.$message({
                showClose: true,
                message: error,
                type: "error",
              });
              this.tableLoding = false;
            });
        }
      },
      //暂存 表单
      savePro() {
        if (!this.formInline.villageCode) {
          this.$message({
            showClose: true,
            message: "请选择村组社区",
            type: "error",
          });
          return;
        }
        this.formInline.uid = store.getters.uid;
        const loading = this.$loading({
          //打开加载等待效果
          lock: true,
          text: "正在暂存",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        if (
          this.formInline.townCode == null ||
          this.formInline.townCode == "" ||
          this.formInline.townCode == undefined
        ) {
          this.$message({
            showClose: true,
            message: "请选择村组社区",
            type: "error",
          });
          loading.close(); //瞬间没得
          return;
        }
        saveProApi(this.formInline)
          .then((response) => {
            this.$message({
              showClose: true,
              message: "暂存成功",
              type: "success",
            });
            this.formInline = {};
            loading.close(); //瞬间没得
            this.$router.go(-1);
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: "暂存失败，请检查",
              type: "error",
            });
            loading.close(); //瞬间没得
          });
      },
      //暂存确认
      saveConfirm() {
        this.oneTimeState = true;
      },
      generateDocMethod() {
        this.formInline.generateDoc = 1;
        this.formInline.department = this.department;
        this.formInline.generateDocList = this.generateDocList;
        this.formInline.generateDocState = false;
        this.savePro();
      },
      cancle() {
        this.$router.go(-1);
      },
      //格式化业务名称
      formatName(row, column) {
        return row.type == "1" ?
          "新建" :
          row.type == "2" ?
          "扩建" :
          row.type == "3" ?
          "迁建" :
          row.type == "4" ?
          "改建" :
          row.type == "5" ?
          "加层" :
          row.type == "6" ?
          "改扩建" :
          "未知";
      },
      //预览handleEditFile
      handleEditFile(index, row) {
        if (row.url) {
          var previewUrl = row.url.split(":");
          var url = config.baseUrl + previewUrl[1];
          if (/\.(jpe?g|png|gif)$/i.test(row.url)) {
            this.url = url;
            this.srcList = url;
            this.centerDialogVisible = true;
          } else {
            window.open(url, "_blank");
          }
          // window.open(config.baseUrl + previewUrl[1], "_blank");
        } else {
          // window.open(row.file);
          // this.$message.error("当前业务未提交（暂存），无法预览！");
          if (/\.(jpe?g|png|gif)$/i.test(row.file.name)) {
            let url = URL.createObjectURL(row.file);
            // window.open(url, "_blank");
            this.url = url;
            this.srcList = url;
            this.centerDialogVisible = true;
          } else if (/\.(pdf)$/i.test(row.file.name)) {
            var win = window.open();
            var reader = new FileReader(); //文件读取器
            reader.readAsDataURL(row.file);
            reader.onload = function () {
              var result = reader.result;

              win.document.write(
                '<body style="margin:0px;"><object data="' +
                result +
                '" type="application/pdf" width="100%" height="100%"><iframe src="' +
                result +
                '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
              );
            };
          } else {
            this.$message.error("该类型文件暂不支持预览，请提交后下载下载");
          }
        }
      },
      //校验身份证
      queryIdCardFunction(idCard, e) {
        //是否重复
        if (idCard) {
          console.log("进来了");
          queryIdCordApi(idCard)
            .then((response) => {
              this.checkIdCardByJs(idCard, e);
              if (this.formInline.idCard.charAt(16) % 2 == 0) {
                this.formInline.sex = "女";
                console.log(this.formInline.sex);
                this.formInline.sex = "女";
              } else {
                this.formInline.sex = "男";
                console.log(this.formInline.sex);
                this.formInline.sex = "男";
              }
              //年龄   6 - 9
              var ageStr = idCard.substring(6, 10);
              var ageInt = parseInt(ageStr);
              var myDate = new Date();
              var tYear = myDate.getFullYear();
              this.formInline.age = tYear - ageInt;
              console.log(this.formInline.age);
              // this.formInline.age = 20;
            })
            .catch((err) => {
              this.$message({
                showClose: true,
                message: err.respondMessage,
                type: "error",
              });
            });
          return true;
        } else {
          this.$message({
            showClose: true,
            message: "请输入身份证号",
            type: "error",
          });
          return false;
        }
      },
      //相同文件提示
      checkFile(list, name) {
        for (let i = list.length - 1; i >= 0; i--) {
          if (list[i].docName == name && name !== "其他件") {
            return false;
          }
        }
        return true;
      },
      //上传文件
      applyFor(name) {
        //this.tempName = name;
        this.cameraState = false;
        this.noState = false;
        this.uploadState = false;
        name = this.fileName;
        if (this.checkFile(this.fileList, name)) {
          this.uploadState2 = true;
          this.fileName = name;
        } else {
          this.$message({
            showClose: true,
            message: name + "已上传，请检查！",
            type: "error",
          });
        }
      },
      getCurrentTime() {
        var myDate = new Date();
        var year = myDate.getFullYear();
        var mounth = myDate.getMonth() + 1;
        var day = myDate.getDate();
        var getUplodTime = year + "-" + mounth + "-" + day;
        return getUplodTime;
      },

      checkIdCardByJs(idCard, e) {
        var num = idCard;
        num = num.toUpperCase();

        var len, re;
        len = num.length;
        if (len == 0) return true;

        //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
        if (!/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num)) {
          this.$message({
            showClose: true,
            message: "请输入15位全数字，或者最后一位为字母的18位身份证号",
            type: "message",
          });
          //this.$refs.idCardText.focus();
          return false;
        }

        //验证前两位地区是否有效
        var aCity = {
          11: "北京",
          12: "天津",
          13: "河北",
          14: "山西",
          15: "内蒙古",
          21: "辽宁",
          22: "吉林",
          23: "黑龙江",
          31: "上海",
          32: "江苏",
          33: "浙江",
          34: "安徽",
          35: "福建",
          36: "江西",
          37: "山东",
          41: "河南",
          42: "湖北",
          43: "湖南",
          44: "广东",
          45: "广西",
          46: "海南",
          50: "重庆",
          51: "四川",
          52: "贵州",
          53: "云南",
          54: "西藏",
          61: "陕西",
          62: "甘肃",
          63: "青海",
          64: "宁夏",
          65: "新疆",
          71: "台湾",
          81: "香港",
          82: "澳门",
          91: "国外",
        };
        if (aCity[parseInt(num.substr(0, 2))] == null) {
          this.$message({
            showClose: true,
            message: "身份证输入有误",
            type: "message",
          });
          //this.$refs.idCardText.focus();
          return false;
        }
        //当身份证为15位时的验证出生日期。
        if (len == 15) {
          re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
          var arrSplit = num.match(re);
          //检查生日日期是否正确
          var dtmBirth = new Date(
            "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          var bGoodDay;
          bGoodDay =
            dtmBirth.getYear() == Number(arrSplit[2]) &&
            dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
            dtmBirth.getDate() == Number(arrSplit[4]);
          if (!bGoodDay) {
            this.$message({
              showClose: true,
              message: "身份证输入有误，生日日期可能有误",
              type: "message",
            });
            //this.$refs.idCardText.focus();
            return false;
          }
        }
        //当身份证号为18位时，校验出生日期和校验位。
        if (len == 18) {
          re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
          var arrSplit = num.match(re);
          //检查生日日期是否正确
          var dtmBirth = new Date(
            arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          var bGoodDay;
          bGoodDay =
            dtmBirth.getFullYear() == Number(arrSplit[2]) &&
            dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
            dtmBirth.getDate() == Number(arrSplit[4]);
          if (!bGoodDay) {
            this.$message({
              showClose: true,
              message: "身份证输入有误，生日日期可能有误",
              type: "message",
            });
            //this.$refs.idCardText.focus();
            return false;
          } else {
            //检验18位身份证的校验码是否正确。
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            var valnum;
            var arrInt = new Array(
              7,
              9,
              10,
              5,
              8,
              4,
              2,
              1,
              6,
              3,
              7,
              9,
              10,
              5,
              8,
              4,
              2
            );
            var arrCh = new Array(
              "1",
              "0",
              "X",
              "9",
              "8",
              "7",
              "6",
              "5",
              "4",
              "3",
              "2"
            );
            var nTemp = 0,
              i;
            for (i = 0; i < 17; i++) {
              nTemp += num.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum != num.substr(17, 1)) {
              this.$message({
                showClose: true,
                message: "身份证输入有误",
                type: "message",
              });
              //idCard.focus();
              //this.$refs.idCardText.focus();
              return false;
            }
          }
        }
        this.idCardState = true;
      },

      //手机正则校验
      checkPhone(mobile, e) {
        if (!mobile) {
          return false;
        }
        var tel = /^0\d{2,3}-?\d{7,8}$/;
        var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(19[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        var tempPhone = "";
        if (mobile.length == 11) {
          //手机号码
          tempPhone = mobile.slice(0, 2);
          if (
            (tempPhone == "13" ||
              tempPhone == "15" ||
              tempPhone == "17" ||
              tempPhone == "18" ||
              tempPhone == "19") &&
            phone.test(mobile)
          ) {
            return true;
          }
        }
        if (
          mobile.length == 11 ||
          (mobile.length == 12 && mobile.indexOf("-") != -1)
        ) {
          if (tel.test(mobile)) {
            return true;
          }
        }
        return false;
      },
      queryIdCardCommitF(idCard) {
        var flag = true;
        queryIdCordApi(idCard).then((response) => {
          this.idCardF = response.data.data.idCard;
          if (response.data.data.idCardCount > 0) {
            flag = false;
          } else if (
            this.formInline.idCard.length == 18 ||
            this.formInline.idCard.length == 15
          ) {
            flag = true;
          }
        });
        return flag;
      },
      queryIdCardFunctionF(idCard, e) {
        if (idCard) {
          this.checkIdCardByJs(idCard, e);
          queryIdCordApi(idCard).then((response) => {
            this.idCardF = response.data.data.idCard;
            if (response.data.data.idCardCount != 0) {
              this.$message({
                showClose: true,
                message: "身份证已存在或者身份证错误，请退出重试添加成员",
                type: "message",
              });
              //年龄   6 - 9
              var ageStr = idCard.substring(6, 10);
              var ageInt = parseInt(ageStr);
              var myDate = new Date();
              var tYear = myDate.getFullYear();
              this.memberDetail.age = tYear - ageInt;
              //this.$refs.idCardFamily.focus();//聚焦
              return false;
              //return flag; memberDetail
            } else if (this.memberDetail.idCard.length == 18) {
              //年龄   6 - 9
              var ageStr = idCard.substring(6, 10);
              var ageInt = parseInt(ageStr);
              var myDate = new Date();
              var tYear = myDate.getFullYear();
              this.memberDetail.age = tYear - ageInt;
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "请输入家庭成员身份证号",
            type: "message",
          });
        }
      },

      //左旋
      leftPhoto() {
        this.dialog.get_actionType("rotateLeft");
      },
      //右旋
      rightPhoto() {
        this.dialog.get_actionType("rotateRight");
      },

      fileState(row, column) {
        if (row.type == null || row.type == "" || row.type == undefined) {
          row.type = "2";
        }
        return row.type == "1" ?
          "录入未提交" :
          row.type == "2" ?
          "初审接件" :
          row.type == "3" ?
          "规划许可" :
          row.type == "4" ?
          "施工管理" :
          row.type == "5" ?
          "竣工验收" :
          row.type == "6" ?
          "归档" :
          "未知";
      },
      //查找其他件
      findOth() {
        var i = this.formInline.formFileList.length;
        while (i--) {
          if (this.formInline.formFileList[i].fileName === "oth") {
            this.formInline.formFileList.splice(i, 1);
            continue;
          }
        }
      },
      //处理缩略图CheckBox点击事件
      checkboxClicked(checkboxItem) {
        if (this.photoPathArray.indexOf(checkboxItem.parentNode.id) < 0) {
          this.photoPathArray.push(checkboxItem.parentNode.id);
        } else {
          var index = this.photoPathArray.indexOf(checkboxItem.parentNode.id);
          this.photoPathArray.splice(index, 1);
        }
      },
    },
    mounted() {
      let baseUrl = "ws://127.0.0.1:12345";
      this.openSocket(baseUrl);
    },
    destroyed: function () {
      //发送关闭信号
      this.dialog.get_actionType("closeSignal");
      //关闭socket
      this.socket.close();
    },
  };
</script>

<style lang="less">
  .inputName {
    border: 1px solid red;
  }

  .buildingType {
    display: inline-block;
    float: right;
  }

  .eastSouthWestNorth {
    display: inline-block;
    width: 75%;
    margin-left: -19%;
  }

  .forSiteInfo {
    display: inline-block;
  }

  .onwer {
    padding: 55px 0;
  }

  .nowInfo {
    padding: 55px 0;
  }

  .approvalInfo {
    padding: 210px 0;
  }

  .landType {
    padding: 26px 0;
  }

  .fourSite {
    width: 450px;
  }

  .uploadStyle {
    margin: 1% 0 1% 0;
    text-align: center;
    height: 100px;
    font-size: 18px;
  }

  .inputData .el-input .el-input__inner {
    border: none;
  }

  .inputTable {
    border-right: 1pt solid gray;

    td {
      border: 1pt solid gray;
      border-bottom: none;
      border-right: none;
      height: 60px;
    }
  }

  .inputTableLast {
    border-right: 1pt solid gray;
    border-bottom: 1pt solid gray;

    td {
      border: 1pt solid gray;
      border-bottom: none;
      border-right: none;
      height: 60px;
    }
  }

  .cardStyle .el-form-item__label {
    font-size: 18px;
  }

  .cardStyle .el-input--medium .el-input__inner {
    font-size: 18px;
  }

  .cardStyle .el-radio__label {
    font-size: 18px;
  }

  .newBuildForm .el-tabs__item {
    font-size: 18px;
  }
</style>